<template>
    <!-- Category-Navbar -->
    <van-nav-bar title="购物车" class="Catecar-Nav" left-arrow @click-left="onClickLeft" />
    <div class="cart">
        <div class="cart-top">
            <!-- 空状态，长度做一个判断 -->
            <van-empty v-show="goodsList.length == 0" description="购物车目前还没有商品" :image="cartEmpty">
                <router-link :to="{ name: 'category' }">
                    <van-button round type="danger" class="top-button">去购物</van-button>
                </router-link>
            </van-empty>
            <!-- 购物车列表 -->
            <div v-for="item in goodsList" :key="item.id" class="list">
                <!-- 商品单元格 -->
                <van-swipe-cell>
                    <!-- 复选框 -->
                    <div class="checkbox">
                        <van-checkbox :name="item" v-model="item.cart.checked" checked-color="#f11a27"
                            @change="checkAllchecked"></van-checkbox>
                    </div>
                    <!-- 商品图片 -->
                    <div class="image">
                        <router-link :to="{ name: 'goodsDetail', params: { id: item.id } }">
                            <van-image width="60" height="60" :src="item.picture" />
                        </router-link>
                    </div>
                    <!-- 商品信息 -->
                    <div class="goods-news">
                        <div>{{ item.name }}</div>
                        <div class="detail-news">
                            <div class="price"><span>￥</span>{{ item.price }}</div>
                            <!-- 调整数字组件 -->
                            <van-stepper v-model="item.cart.num" :max="item.stock" theme="round" button-size="24"
                                disable-input />
                        </div>
                    </div>
                    <!-- 删除 -->
                    <template #right>
                        <van-button square icon="delete" type="danger" class="delete-button"
                            @click="deleteCart(item)" />
                    </template>
                </van-swipe-cell>
            </div>
        </div>
        <!-- 结算功能 -->
        <van-submit-bar v-show="goodsList.length" :price="total * 100" button-text="去结算" button-type="primary"
            @submit="getsubmit" class="cartCount">
            <van-checkbox v-model="allChecked" checked-color="#f11a27" @click="getAllChecked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getCartList } from '../api';
import getCart from '../stores/cart';
import { showToast } from 'vant';
// 空购物车图片
import cartEmpty from '../icons/cart_empty.png'
import router from '../router';

const { cart, removeCart, clearCart } = getCart()
const goodsList = ref([])
// 给全选的初始值设置为false
const allChecked = ref(false)

// 生命周期函数
onMounted(() => {
    loadingCart()
})

//navBar返回上级
const onClickLeft = () => history.back()

// 加载购物车数据
const loadingCart = async () => {
    console.log(cart, 222);
    // map获取值(拿这个id，赋给我们商品的ids值)
    // var ids = []
    const ids = cart.map(item => item.id)
    console.log(ids, 333);

    // ids是商品id字符串
    goodsList.value = await getCartList({ ids: ids.join(',') })
    goodsList.value.forEach(goods => {
        goods.cart = cart.find(item => goods.id == item.id)
    })
    console.log(goodsList.value, '111');
    //1.
    checkAllchecked()
}

const checkAllchecked = () => {
    var findIndex = goodsList.value.findIndex(item => item.cart.checked === false);
    allChecked.value = findIndex == -1 ? true : false
}

// 删除商品
const deleteCart = item => {
    const id = item.id
    // 遍历，判断，如果是我们要的商品，那么splice获取index索引删除
    goodsList.value.forEach((item, index) => {
        if (item.id == id) {
            goodsList.value.splice(index, 1)
        }
    })
    removeCart(id)
    checkAllchecked()
}

// 总金额计算
const total = computed(() => {
    let num = 0
    // 遍历拿到商品的值后，做一个判断
    goodsList.value.forEach(item => {
        // 如果购物车中我们选中了商品，那么计算并赋值给num。返回
        if (item.cart.checked) {
            num += item.price * item.cart.num
        }
    })
    return num
})

// 全选
const getAllChecked = () => {
    var flag = allChecked.value
    goodsList.value.forEach(el => {
        el.cart.checked = flag
    })
    allChecked.value = flag
}

// 商品全部选中时，全选高亮
const getChange = () => {
    // 每一个值都通过了才高亮
    console.log(goodsList.value, '1111');

    allChecked.value = goodsList.value.forEach(el => el.checked == true)
    console.log(allChecked.value, 777);

}
const clearCart1 = ()=>{
    var newgoodList = goodsList.value.filter(item => item.cart.checked === false)
        goodsList.value = newgoodList;
        clearCart(goodsList.value)
        
}
// 去结算功能
const getsubmit = () => {
    setTimeout(function () {
        clearCart1(1111)
        showToast('结算成功')
    }, 2000)
}


</script>

<style scoped>
.cart-top {
    margin-top: 1rem;
}

.list {
    position: relative;
    height: 5rem;
    border-radius: 10px;
    box-shadow: 0px 0px 5px #ccc;
    margin-bottom: 1rem;
}

.checkbox {
    position: absolute;
    top: 1.7rem;
    left: .2rem;
}

.image {
    position: absolute;
    top: .7rem;
    left: 2rem;
}

.goods-news {
    height: 5rem;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 0 1rem 0 6rem;
}

.detail-news {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    color: #c82519;
    font-size: 18px;
}

.delete-button {
    width: 2rem;
    height: 100%;
}

.Catecar-Nav :deep(.van-nav-bar__title) {
    color: #fff;
}

.Catecar-Nav :deep(.van-nav-bar__content) {
    background-color: #ff8001;
}

.Catecar-Nav {
    --van-nav-bar-icon-color: #fff;
}

.top-button {
    width: 7rem;
    height: 2rem;
}

:deep(.van-submit-bar) {
    bottom: 3.5rem;
}

:deep(.van-swipe-cell) {
    width: 100%;
}
</style>